<template>
<div>
    <el-steps :active="active" finish-status="success">
    <el-step title="步骤 1"></el-step>
    <el-step title="步骤 2"></el-step>
    <el-step title="步骤 3"></el-step>
    </el-steps>
    <step1 v-if="active===0" ></step1>
    <step2 v-if="active===1"></step2>
    <step3 v-if="active===2"></step3>
    <div class="deployBtn">
          <el-button type="primary" icon="el-icon-arrow-left" v-if='active===1||active===2' @click='prev'>上一页</el-button>
          <el-button type="primary" v-if='active===0||active===1' @click="next">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
          <el-button type="primary" v-if='active===2'>提交</el-button>
    </div>
</div>
</template>
<script>
import step1 from './AddTest/step1'
import step2 from './AddTest/step2'
import step3 from './AddTest/step3'
  export default {
    name:'AddTest',
    components:{
      step1,
      step2,
      step3
    },
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        active: 0
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
       next() {
        if (this.active++ > 2) this.active = 0;
      },
      prev() {
        --this.active
        if(this.active<0){
          this.active=0
        }

      }
    }
  }
</script>
<style lang='stylus' scoped>
.el-form
    width:800px
</style>

